<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="style.css" type="text/css" />
    <script type="text/javascript" src="../js/date.js"></script>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAA5ykKBm9eB2hstTJwjqYAbhRzJlgbhhCrdN1l84Y2xPlzBgof0hQge8wL-CCZJoQ2ehwdnsIsglHFPg" type="text/javascript"></script>
    <script type="text/javascript" src="../js/prototype.js"></script>
    <script type="text/javascript" src="../js/mapstraction.js"></script>
    <!--[if IE]>
        <script type="text/javascript" src="../js/excanvas.js"></script>
        <script type="text/javascript" src="../js/base64.js"></script>
    <![endif]-->
    <script type="text/javascript" src="../js/canvastext.js"></script>
    <script type="text/javascript" src="../js/flotr-0.2.0-alpha.js"></script>
    <script type="text/javascript" src="../js/ObjTree.js"></script>
    <script type="text/javascript" src="../js/tools4gps.js"></script>
</head>
<body>
<div id="map" style="width: 580px; height: 350px"></div>
<div id="buttons">
    <img class="zoom" src="img/zoom_off.png" width="22" height="22">
    <img class="xaxis" src="img/dist_off.png" width="22" height="22">
    <img class="yaxis" src="img/elev_off.png" width="22" height="22">
</div>
<div id="profile" style="width:580px; height:160px;"></div>
<div id="report">
  <div class="twocolumn">
    <dl>
      <dt>Distance</dt><dd class='totDist'> Km</dd>
      <dt>Maximum elevation</dt><dd class='maxElev'> m</dd>
      <dt>Elevation gain</dt><dd class='elevGain'> m</dd>
      <dt>Average velocity</dt><dd class='avgVel'> Km/h</dd>
      <dt>Total time</dt><dd class='totTime'> h</dd>
      <dt>Moving time</dt><dd class='totTimeMove'> h</dd>
      <dt>Plain time</dt><dd class='totTimeFlat'> h</dd>
    </dl>
  </div>
  <div class="twocolumn">
    <dl>
      <dt>3D distace</dt><dd class='totDist3d'> Km</dd>
      <dt>Minimum elevation</dt><dd class='minElev'> m</dd>
      <dt>Elevation loss</dt><dd class='elevLoss'> m</dd>
      <dt>Maximum velocity</dt><dd class='maxVel'> Km/h</dd>
      <dt>Stopped time</dt><dd class='totTimeStop'> h</dd>
      <dt>Uphill time</dt><dd class='totTimeUp'> h</dd>
      <dt>Downhill time</dt><dd class='totTimeDown'> h</dd>
    </dl>
  </div>
</div>
<table id="planner">
  <thead>
    <th class='num'>Num.</th>
    <th class='dist'>Distance</th>
    <th class='lat'>Latitude</th>
    <th class='lon'>Longitude</th>
    <th class='elev'>Elevation</th>
    <th class='time'>Date and time</th>
    <th class='elevGain'>Elev. gain</th>
  </thead>
  <tbody>
    <td></td>
    <td> Km</td>
    <td></td>
    <td></td>
    <td> m</td>
    <td></td>
    <td> m</td>
  </tbody>
</table>
<script type="text/javascript">
    var map = new Mapstraction('map','google');
    map.addControls({
        pan: true,         zoom: 'small',
        scale: true,    map_type: false 
    });
    map.setMapType(Mapstraction.HYBRID);
    var parser = new GPS.Parser("gpsdata/070121_itobal-lascuevas.gpx");
    parser.run(function (gpsData) {
        var chart = new GPS.Profile("profile", gpsData);
        var report = new GPS.Report("report", gpsData, {'chart': chart});
        var buttonbar = new GPS.ButtonBar("buttons", {'chart': chart, 'report': report});
        var planner = new GPS.Planner("planner", gpsData);
        var gpsmap = new GPS.Map(map, gpsData, {'chart': chart});
    });
</script>
</body>
</html>
